<script lang="ts" setup>
import { computed, onMounted } from "vue";

import logo1 from "@/assets/143.png";
import logo3 from "@/assets/145.png";
import logo6 from "@/assets/150.png";
import NormalHeader from "@/components/NormalHeader.vue";

onMounted(() => {
});

// 示例数据
const data = computed(() => [
  {
    title: "双创广场",
    count: "300+",
    description: "集成各类优质项目100+",
    icon: logo1,
    style: "innovationCard",
    // path: "/dachuang",
  },
  {
    title: "数据广场",
    count: "7000+",
    description: "集成开源数据8000+",
    icon: logo3,
    style: "dataCard",
    // path: "/shuju",
  },
  {
    title: "学习广场",
    count: "100+",
    description: "集成多模态学习资料100+",
    icon: logo6,
    style: "learningCard",
    // path: "/skill",
  },
]);
</script>

<template>
  <a-layout>
    <NormalHeader title="首页" />
    <a-layout-content style="margin-top: 20px;">
      <div>
        <a-row v-for="(item, index) in data" :key="index" justify="center" style="margin-bottom: 2.15rem;">
          <a-col :span="21">
            <a-card class="cardContainer" :class="[item.style]">
              <div style="display: flex;">
                <img :src="item.icon" alt="icon" class="card-icon">
                <div style="flex-direction: column; margin-left: 2.5rem; font-size: 1.25rem">
                  <div style="margin-bottom: 1.875rem">
                    {{ item.title }}
                  </div>
                  <div style="font-size: 1rem">
                    集成 <span style="font-size: 1.875rem">{{ item.count }}</span> 项
                  </div>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
        <a-flex justify="center">
          <div class="right-section">
            <div class="title">
              智链iLink
            </div>
            <div class="info">
              <p>
                地址：北京市海淀区西土城路10号
              </p>
              <p>
                邮箱: ehaihong@bupt.edu.cn
              </p>
            </div>
          </div>
        </a-flex>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<style scoped>
.cardContainer {
  align-items: center;
  border-radius: 1.25rem;
  width: 100%;
  height: 10.5rem;
  color: white;
  font-weight: bold;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
}

.cardContainer:hover {
  transform: translateY(-0.125rem);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
}

.card-icon {
  font-size: 2.5rem;
}

.modelCard {
  background-color: #5fa4fd;
}

.dataCard {
  background-color: #56cede;
}

.learningCard {
  background-color: #23a0f4;
}

.componentCard {
  background-color: #46b9d0;
}

.applicationCard {
  background-color: #40ceba;
}

.innovationCard {
  background-color: #6374fa;
}

.right-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.title {
  font-weight: 500;
  font-size: 16px;
  line-height: 22.4px;
  margin-bottom: 0;
  background: linear-gradient(100.12deg, #4B79DB 0%, #3BBAFC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
</style>
